<template>
  <div class="h-4/5 flex items-center justify-center flex-col">
    <TodoInput></TodoInput>
    <TodoList :todoList="todoList"></TodoList>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, computed } from "vue";
import TodoInput from "@/components/TodoInput/index.vue";
import TodoList from "@/components/TodoList/index.vue";
import { IUseTodo, useTodo } from "./hooks";
import { Store, useStore } from "vuex";
export default defineComponent({
  name: "App",
  components: { TodoInput, TodoList },
  setup(props, { emit, slots }) {
    const { setTodoList }: IUseTodo = useTodo();
    const store: Store<any> = useStore();
    onMounted(setTodoList);
    return {
      todoList: computed(() => store.state.list)
    };
  },
});
</script>
<style lang="scss">
#app {
  @apply h-screen
}
</style>
